<template>
    <!-- 不能删除这个多余的div -->
    <div>
        <div :class="[String(className)]" :style='styles'></div>
    </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import SvgIcon from 'svgIcon/SvgIcon.vue';
import { defineComponent, ref, reactive, watch, computed, onMounted, onBeforeUnmount } from 'vue';

export default defineComponent({
    components: { SvgIcon },
    props: {
        seriesData: {
            type: Array,
            require: true
        },
        legendName: {
            type: Array,
            default: () => {
                return [];
            }
        },
        xName: {
            type: Array,
            default: () => {
                return [];
            }
        },
        yStyle: {
            type: Object,
            default: () => {
                return {};
            }
        },
        yUnit: {
            type: String,
            default: ''
        },
        yMax: {
            type: Number,
            default: null
        },
        extendsColor: {
            type: Array,
            default: () => {
                return ['#54cd9b', '#f7bd64', '#F7BD64'];
            }
        },
        areaColor: {
            type: Array,
            default: () => {
                return [];
            }
        },
        tooltipFormatter: {
            type: Object,
            default: () => {
                return {};
            }
        },
        styles: {
            type: Object,
            default: () => {
                return { width: '100%', height: '300px' };
            }
        },
        title: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        let className: any = Number.parseInt(Math.random() * 100000);
        let echar: any = ref(null);
        let options = reactive({
            color: props.extendsColor,
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(245,245,245,0.85)',
                borderColor: '#94C3F5',
                borderWidth: 1,
                className: 'selfTip',
                axisPointer: {
                    lineStyle: {
                        type: 'solid',
                        color: '#DBDEE2'
                    }
                },
                textStyle: {
                    color: '#555D70'
                },
                ...props.tooltipFormatter
            },
            // legend: {
            //     data: props.legendName,
            //     bottom: 0,
            //     itemWidth: 30,
            //     itemHeight: 6,
            //     itemGap: 16,
            //     icon: 'roundRect'
            // },
            grid: {
                top: '10px',
                left: '0',
                right: '10px',
                bottom: '0',
                containLabel: true
            },
            xAxis: {
                data: props.xName,
                // x轴刻度
                axisTick: {
                    show: false
                },
                // x轴线
                axisLine: {
                    show: false
                },
                // x轴分割线
                splitLine: {
                    show: false
                },
                //x轴内容
                axisLabel: {
                    show: false
                }
            },
            yAxis: [
                {
                    type: 'value',
                    max: props.yMax,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: props.seriesData
        });

        // 阴影颜色
        props.areaColor.forEach((item: any, index: Number) => {
            let obj = {
                areaStyle: {
                    color: {
                        // x上 y下
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 0.5,
                        colorStops: [
                            {
                                offset: 0,
                                color: item // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,255,255,0)' // 0% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                }
            };
            Object.assign(options.series[index], obj);
        });

        const initEcharts = () => {
            let node: any = document.getElementsByClassName(className)[0];
            echar = echarts.init(node);
            echar.setOption(options);
        };
        const resize = () => {
            if (echar.resize) {
                echar.resize();
            }
        };

        watch(
            () => props.seriesData,
            (data: any, old: any) => {
                if (data) {
                    echar.setOption(options, true);
                }
                resize();
            },
            {
                deep: true
            }
        );

        onMounted(() => {
            initEcharts();
            window.addEventListener('resize', resize);
        });
        onBeforeUnmount(() => {
            window.removeEventListener('resize', resize);
            echar.dispose && echar.dispose();
        });

        return { className, options };
    }
});
</script>

<style lang="scss">
.selfTip > div > div > div:first-child {
    border-bottom: 1px solid #ced2d9;
    padding-bottom: 7px;
}

.selfTip > div > div > div > div > div > span:last-of-type {
    position: relative;
    padding-left: 10px;
    margin-left: 0 !important;
    &::before {
        content: '：';
        position: absolute;
        top: 0;
        left: 0;
    }
}
</style>